<!-- 公共列表页 -->
<script>
import HPModuleTitle from "@/components/HPModuleTitle";
export default {
  props: {
    titleText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  components: {
    HPModuleTitle,
  },
};
</script>

<template>
  <ul class="common-pd-page common-page-container">
    <li class="common-page-other common-page-buttons">
      <!-- <HPModuleTitle :title-text="titleText"> -->
        <!-- <slot name="header"></slot> -->
      <!-- </HPModuleTitle> -->
    </li>
    <li class="common-page-other">
      <slot></slot>
    </li>
    <li class="common-page-other common-page-search">
      <ul class="common-search-form">
        <li class="common-search-form-left">
          <slot name="searchForm"></slot>
        </li>
        <li class="common-search-form-right">
          <slot name="header"></slot>
          <slot name="searchFormbtn"></slot>
        </li>
      </ul>
    </li>
    <li class="common-page-tabs">
      <slot name="tabs"></slot>
    </li>
    <li class="common-page-table">
      <slot name="table"></slot>
    </li>
    <li class="common-page-other common-page-pagination">
      <slot name="pagination"></slot>
    </li>
  </ul>
</template>

<style lang="scss">
.common-page-container {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .common-page-other {
    flex: none;
  }
  .common-page-buttons {
    position: absolute;
    right: 100px;
  }
  .common-page-table {
    flex: 1;
    // overflow: hidden;
    overflow-y: auto;
  }
  .common-search-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    &-left {
      flex: 1;
    }
    &-right {
      flex: none;
    }
  }
  .tabs-box {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
  }
  .common-page-pagination {
    padding-top: 20px;
  }
  .common-page-search {
    text-align: left;
  }
  .common-search-form-right {
    .el-button--success {
      color: #ffffff;
      background-color: #00a1d6;
      border-color: #00a1d6;
    }
  }
  .color-yellow {
    color: orange;
    .circle {
      background-color: orange;
    }
  }
  .color-green {
    color: #2ba471;
    .circle {
      background-color: #2ba471;
    }
  }
  .color-pink {
    color: #fb7299 !important;
    .circle {
      background-color: #fb7299;
    }
  }
  .color-blue {
    color: #00a1d6;
    .circle {
      background-color: #00a1d6;
    }
  }
  .color-grey {
    color: #a6a6a6;
    .circle {
      background-color: #a6a6a6;
    }
  }
}
</style>
